.btn {
  @include button_style;
}

.btn-link {
  @include button_link_style;
}

.btn:hover,
.btn-link:hover {
  background: shade($gray, 10%);
}

.btn-block {
  display: block !important;
  width: 100%;
  max-width: 100% !important;
}

.btn-sm {
  padding: $btn_mobile_padding !important;
  font-size: $btn_mobile_font_size !important;
}

.btn-md {
  padding: $btn_medium_padding !important;
  font-size: $btn_medium_font_size !important;
}

.btn-lg {
  padding: $btn_large_padding !important;
  font-size: $btn_large_font_size !important;
} 

.btn-xl {
  padding: $btn_ex_large_padding !important;
  font-size: $btn_ex_font_size !important;
}

@each $key, $color in $colors {
  .flat-btn-#{$key} {
    background: $color;
    border: 3px solid $color;
    transition: box-shadow $btn_transition_duration linear;
   
    @include flat_btn_hover($color, $white);
    @include flat_btn_focus($color, $white);
  }

  .ghost-btn-#{$key} {
    background: $white;
    transition: background-color $btn_transition_duration linear;
    border: 3px solid #{$color};
    color: $color;

    &:hover,
    &:focus {
      background: $color;
      color: $white;
    }
  }
}

.flat-btn-white {
  background: $white;
  color: $dark;
  border: 3px solid $white;
  transition: box-shadow $btn_transition_duration linear;
   
  @include flat_btn_hover($white, $dark);
  @include flat_btn_focus($white, $dark);
}

.ghost-btn-white {
  background: transparent;
  transition: background-color $btn_transition_duration linear;
  border: 3px solid $white;
  color: $white;

  &:hover,
  &:focus {
    background: $white;
    color: $dark;
  }
}

@media (min-width: $breakpoint_md) {
  .btn,
  .btn-link {
    padding: $btn_medium_padding;
    font-size: $btn_medium_font_size;
  }
}
